<template>
  <div class="content-wrapper">
    <!-- <div class="content-header"></div>
    <div class="title">
      <div>快递管理</div>
    </div>
    <el-divider /> -->
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="快递名称">
          <el-input v-model="listQuery.content" type="text" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="mini"
            round
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            class="filter-item"
            size="mini"
            round
            icon="el-icon-plus"
            @click="handleCreate"
          >
            新建
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="listLoading"
        :data="list"
        align="left"
        highlight-current-row
      >
        <el-table-column label="快递名称" prop="expressName" width="150px" />
        <el-table-column label="状态" prop="status" width="100px" />
        <el-table-column label="联系人" prop="principal" width="100px" />
        <el-table-column label="联系人电话" prop="principalTel" width="100px" />
        <el-table-column label="备注" prop="memo" min-width="200px" />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="view(row, 1)">编辑</el-dropdown-item>
                <el-dropdown-item @click.native="view(row, 1)">停用</el-dropdown-item>
                <el-dropdown-item @click.native="view(row, 1)">查看</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer title="新建快递" :visible.sync="dialogFormVisible">
        <el-form
          ref="dataForm"
          :model="temp"
          :rules="rules"
          label-position="right"
          label-width="120px"
          style="width: 480px"
        >
          <el-form-item label="快递名称">
            <el-input />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input />
          </el-form-item>
          <el-form-item label="联系人电话">
            <el-input />
          </el-form-item>
          <el-form-item label="参数配置">
            <el-input />
          </el-form-item>
          <el-form-item label="备注">
            <el-input />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createData()">提交</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listLoading: false,
      list: [{
        expressName: '顺丰速运',
        status: '正常',
        principal: '光头强',
        permission: '仓储部，物流部'
      }, {
        expressName: '京东快递',
        status: '正常',
        principal: '赵琳',
        permission: '质检部'
      }, {
        expressName: '德邦快递',
        status: '正常',
        principal: '熊大',
        permission: '研发部'
      }],
      listQuery: {},
      temp: {

      },
      rules: {

      },
      dialogFormVisible: false
    }
  },
  mounted() {

  },
  methods: {
    search() {

    },
    view(row, index) {
      console.log(row)
    },
    resetTemp() {
      this.temp = {
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          console.log()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>